<Page>
  <Navbar title="Master Detail" backLink="Back"></Navbar>
  <Block strong>
    <p>Master-Detail pattern oftenly used on wide enough screens and tablets, and consists of two views. Master - is an area in the UI where you have a list of something. Detail - is the area that shows the relevant information of a selection in the master.</p>
    <p>To see Master Detail view make sure the window width is larger than 800px.</p>
    <p>When collapsed (on narrow screen) navigation between such pages will behave as usual routing.</p>
    <p>Navigation to/from Master-Detail view happens without transition.</p>
  </Block>

  <List>
    <ListItem reloadDetail={true} link="/master-detail/1/">Detail Page 1</ListItem>
    <ListItem reloadDetail={true} link="/master-detail/2/">Detail Page 2</ListItem>
    <ListItem reloadDetail={true} link="/master-detail/3/">Detail Page 3</ListItem>
  </List>
</Page>
<script>
  import { Page, Navbar, Block, List, ListItem } from 'framework7-svelte';
</script>
